<template>
  <div class="cate_wrap">
    <div class="cate_title">
      <span id="myhome">首页</span> &gt; <span>居家</span> &gt;
      <span>茶咖酒局</span>
    </div>
    <div class="cates_list">
      <div
        class="cate_one"
        v-for="(item, index) in saleProperties"
        :key="index"
      >
        <span>{{ item.name }}：</span>
        <div class="cate_info" id="cate">
          <a href="javascript:void(0);" @click="change($event)" class="active"
            >全部</a
          >
          <a
            href="javascript:void(0);"
            v-for="(secItem, ind) in item.properties"
            :key="ind"
            @click="change($event)"
            >{{ secItem.name }}</a
          >
        </div>
      </div>
    </div>
    <!-- 商品筛选按钮 -->
    <div class="cate_nav">
      <div
        :class="navIndex == index ? 'active' : ''"
        v-for="(item, index) in navList"
        :key="index"
        @click="navIndex = index"
      >
        {{ item }}
      </div>
    </div>
    <!-- 商品列表部分 -->
    <div class="cate_goods">
      <div class="goods_one" v-for="(item, index) in cateProducts" :key="index">
        <img v-lazy="item.picture" alt="" />
        <p>{{ item.name }}</p>
        <div>{{ item.desc }}</div>
        <h2>￥{{ item.price }}</h2>
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from '../../utils/tool'
import { _getCateDetail, _getCateProduct } from '../../api/category'
export default {
  data () {
    return {
      navIndex: 0,
      count: 0,
      pages: 0,
      page: 1,
      pageDirection: true, //true向下  false 向上
      pageSize: 20,
      cateProducts: [], //列表数据
      navList: ['默认排序', '最新商品', '最高人气', '评论最多', '价格排序'],
      categoryId: '', //一级分类id
      saleProperties: [] //分类筛选数据
    }
  },
  created () {
    // 接收参数
    this.categoryId = this.$route.query.id
    this.getCate()
    this.getProduct()
  },
  mounted () {
    document.addEventListener('scroll', debounce(this.getPos, 500), true)
    document.addEventListener(
      'mousewheel',
      e => {
        if (e.wheelDelta > 0) {
          this.pageDirection = false
        } else {
          this.pageDirection = true
        }
      },
      true
    )
  },
  beforeDestroy () {
    // document.removeEventListener('scroll', debounce(this.getPos, 500))
  },
  methods: {
    getPos () {
      // 获取页面滚动位置
      // 整个页面的高度
      var allHeigtht =
        document.body.scrollHeight || document.documentElement.scrollHeight
      //
      console.log(allHeigtht)
      var top = document.body.scrollTop || document.documentElement.scrollTop
      console.log(top)
      if (top > allHeigtht - 1200 && this.pageDirection) {
        // 加载新的内容
        this.page++
        this.getProduct()
      }
    },
    async getProduct () {
      // 获取分类商品接口
      var res = await _getCateProduct({
        categoryId: this.categoryId,
        page: this.page,
        pageSize: this.pageSize
      })
      console.log(res)
      this.count = res.data.result.count
      this.cateProducts = [...this.cateProducts, ...res.data.result.items]

      this.pages = res.data.result.pages
    },
    change (e) {
      console.log(e)
      // vue 的事件对象 获取当前元素 或父级元素
      var cates = e.path[1].children //根据事件对象获取所有a标签
      for (var i = 0; i < cates.length; i++) {
        // 循环情况所有a标签的className
        cates[i].className = ''
      }
      // e.path[0] 当前元素  e.path[1] 父元素 e.path[2]
      e.target.className = 'active'
    },
    // 获取分类筛选条件
    async getCate () {
      var res = await _getCateDetail(this.categoryId)
      console.log(res)
      this.saleProperties = res.data.result.saleProperties
    }
  }
}
</script>
<style lang="less" scoped>
.cate_wrap {
  width: 1240px;
  margin: 20px auto;
  .cate_title {
    display: flex;
    font-size: 30px;
    font-family: '黑体';
  }
}
.cates_list {
  width: 1240px;
  margin: 30px auto;
  .cate_one {
    display: flex;

    span {
      font-size: 20px;
      width: 120px;
      text-align: right;
    }
    .cate_info {
      flex: 1;
      a {
        color: black;
        margin-left: 20px;
        margin-top: 20px;
        font-size: 20px;
        &:hover {
          color: #27bb9a;
        }
      }
      .active {
        color: #27bb9a;
        font-size: 23px;
      }
    }
  }
}
.cate_nav {
  width: 1240px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  div {
    width: 130px;
    height: 50px;
    background: #ccc;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    margin-left: 20px;
    cursor: pointer;
    &.active {
      background: #27bb9a;
      color: white;
    }
  }
}
.cate_goods {
  width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .goods_one {
    width: 229px;
    height: 300px;
    text-align: center;
    &:hover {
      transition: all 0.5s;
      transform: scale(1.01);
      box-shadow: 2px 2px 2px #ccc, -2px -2px 2px #ccc;
    }
    img {
      width: 160px;
      height: 160px;
    }
    h2 {
      color: red;
    }
  }
}
</style>
